<template>
  <div class="card-detail-bg">
    <div class="card-detail-header">
      <el-button link class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="card-detail-title">银行卡详情</span>
    </div>
    <div class="card-detail-main">
      <div class="bank-card-box">
        <div class="bank-card-head">
          <div class="bank-name">{{ card.bank }}</div>
          <div class="bank-type">{{ card.type }}</div>
        </div>
        <div class="bank-card-num" @click="showAgreement = true" style="cursor:pointer;">
          <template v-if="showFullCard">
            <span class="num">{{ card.number }}</span>
          </template>
          <template v-else>
            <span class="star">**** **** ****</span>
            <span class="num">{{ card.number.slice(-4) }}</span>
          </template>
          <el-tag size="small" class="main-tag">主借记卡</el-tag>
        </div>
      </div>
      <el-card class="card-detail-list">
        <div class="card-list-item" v-for="item in detailList" :key="item.text" @click="item.action && item.action()">
          <span>{{ item.text }}</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </el-card>
      <div class="card-detail-footer">
        <el-link type="primary">常见问题</el-link>
        <span class="footer-divider">|</span>
        <el-link type="primary">联系银行</el-link>
      </div>
    </div>
    <!-- 支付限额弹窗 -->
    <transition name="fade">
      <div v-if="showLimit" class="limit-popup-bg" @click.self="showLimit = false">
        <div class="limit-popup-card">
          <div class="limit-popup-header">
            <el-icon class="limit-popup-check"><CircleCheckFilled /></el-icon>
            <span class="limit-popup-title">支付限额</span>
            <el-button link class="limit-popup-close" @click="showLimit = false"><el-icon><Close /></el-icon></el-button>
          </div>
          <div class="limit-popup-row">
            <span class="limit-label">单笔限额</span>
            <span class="limit-value">¥50000.00</span>
          </div>
          <div class="limit-popup-row">
            <span class="limit-label">每日限额</span>
            <span class="limit-value">¥100000.00</span>
          </div>
        </div>
      </div>
    </transition>
    <!-- 极简活体检测弹窗 -->
    <transition name="fade">
      <div v-if="showFace" class="simple-liveness-bg">
        <div class="simple-liveness-card">
          <div class="simple-liveness-title">请面向屏幕</div>
          <el-avatar :size="120" src="https://randomuser.me/api/portraits/men/32.jpg" class="simple-liveness-avatar" />
          <div class="simple-liveness-tip" v-if="!livenessSuccess">{{ livenessTip }}</div>
          <div class="simple-liveness-success" v-else>验证成功</div>
        </div>
      </div>
    </transition>
    <!-- 刷脸认证弹窗 -->
    <transition name="fade">
      <div v-if="showAgreement" class="face-popup-bg">
        <div class="face-popup-card">
          <div class="face-popup-header">
            <el-button link class="face-back-btn" @click="showAgreement = false">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
          </div>
          <div class="face-popup-icon">
            <svg width="56" height="56" viewBox="0 0 56 56" fill="none"><circle cx="28" cy="28" r="28" fill="#E8F7E6"/><path d="M28 36c-4.418 0-8-3.134-8-7h2c0 2.761 2.686 5 6 5s6-2.239 6-5h2c0 3.866-3.582 7-8 7Zm0-16c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4s4-1.79 4-4c0-2.21-1.79-4-4-4Zm0 14c-3.314 0-6-2.239-6-5s2.686-5 6-5 6 2.239 6 5-2.686 5-6 5Z" fill="#34C759"/></svg>
          </div>
          <div class="face-popup-title">刷脸认证</div>
          <div class="face-popup-desc">
            请确保实名本人（<span class="face-popup-name">**米</span>）操作<br>
            <span class="face-popup-warn">哈基米</span>
          </div>
          <div class="face-popup-agree">
            <el-checkbox v-model="agree">验证时需同意 <el-link type="primary" :underline="false">刷脸核身服务协议</el-link></el-checkbox>
          </div>
          <el-button type="primary" class="face-popup-btn" :disabled="!agree" @click="startLiveness">同意协议并验证</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, ArrowRight, Close, CircleCheckFilled } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const goBack = () => router.back()

const showLimit = ref(false)
const showAgreement = ref(false)
const showFace = ref(false)
const showFullCard = ref(false)
const agree = ref(false)

// 极简活体检测
const livenessTips = ['请眨眨眼', '请摇摇头', '请点点头']
const livenessTip = ref(livenessTips[0])
const livenessSuccess = ref(false)
let livenessTimer = null
function startLiveness() {
  showAgreement.value = false
  showFace.value = true
}
watch(showFace, (val) => {
  if (val) {
    livenessSuccess.value = false
    let idx = 0
    livenessTip.value = livenessTips[idx]
    livenessTimer = setInterval(() => {
      idx++
      if (idx < livenessTips.length) {
        livenessTip.value = livenessTips[idx]
      } else {
        clearInterval(livenessTimer)
        livenessSuccess.value = true
        setTimeout(() => {
          showFace.value = false
          showFullCard.value = true
        }, 1000)
      }
    }, 1000)
  } else {
    clearInterval(livenessTimer)
  }
})

// 假数据
const cardList = [
  {
    number: '6228481234568391',
    bank: '建设银行',
    type: '储蓄卡',
    isMain: true
  }
]
const card = ref(cardList.find(c => c.number.endsWith(route.params.number)) || cardList[0])

const detailList = [
  { text: '交易明细', action: () => {} },
  { text: '支付限额查询', action: () => { showLimit.value = true } }
]
</script>

<style scoped>
.card-detail-bg {
  background: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 32px;
}
.card-detail-header {
  display: flex;
  align-items: center;
  padding: 18px 0 0 0;
  background: #f5f7fa;
}
.back-btn {
  font-size: 1.1em;
  color: #409EFF;
  padding: 0 0 0 8px;
  margin-right: 8px;
}
.card-detail-title {
  flex: 1;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
}
.card-detail-main {
  max-width: 400px;
  margin: 0 auto;
  padding: 24px 0 0 0;
}
.bank-card-box {
  background: #409eff;
  border-radius: 12px;
  color: #fff;
  padding: 20px 18px 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(64,158,255,0.08);
  position: relative;
}
.bank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bank-name {
  font-size: 1.2em;
  font-weight: 600;
}
.bank-type {
  font-size: 1em;
  opacity: 0.9;
}
.bank-card-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15em;
  margin-top: 8px;
}
.star {
  letter-spacing: 2px;
}
.num {
  font-size: 1.3em;
  font-weight: bold;
  margin-left: 2px;
}
.main-tag {
  margin-left: 10px;
  background: #fff;
  color: #409eff;
  border: none;
}
.card-detail-list {
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #f2f2f2;
}
.card-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 12px;
  font-size: 1.05em;
  color: #222;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
}
.card-list-item:last-child {
  border-bottom: none;
}
.card-list-item:hover {
  background: #f5f7fa;
}
.card-detail-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  color: #888;
  font-size: 0.98em;
  gap: 16px;
}
.footer-divider {
  color: #e0e0e0;
  margin: 0 4px;
}
/* 支付限额弹窗样式 */
.limit-popup-bg {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: 0;
  background: rgba(0,0,0,0.12);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.limit-popup-card {
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -2px 24px rgba(0,0,0,0.10);
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
  padding: 24px 24px 32px 24px;
  animation: popupUp 0.25s cubic-bezier(.4,1.4,.6,1) both;
}
@keyframes popupUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
.limit-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  position: relative;
}
.limit-popup-check {
  color: #409eff;
  font-size: 1.3em;
}
.limit-popup-title {
  font-weight: 600;
  font-size: 1.08em;
  color: #222;
}
.limit-popup-close {
  position: absolute;
  right: 0;
  top: 0;
  color: #bbb;
  font-size: 1.1em;
}
.limit-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 1.08em;
  border-bottom: 1px solid #f5f5f5;
}
.limit-popup-row:last-child {
  border-bottom: none;
}
.limit-label {
  color: #888;
}
.limit-value {
  color: #222;
  font-weight: 600;
  letter-spacing: 1px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 600px) {
  .card-detail-main {
    max-width: 100vw;
    padding: 12px 0 0 0;
  }
  .bank-card-box, .card-detail-list {
    border-radius: 10px;
  }
  .limit-popup-card {
    border-radius: 14px 14px 0 0;
    padding: 18px 8px 24px 8px;
  }
}
.simple-liveness-bg {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.12);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.simple-liveness-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  width: 90vw;
  max-width: 340px;
  padding: 32px 18px 24px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.simple-liveness-title {
  font-weight: bold;
  font-size: 1.08em;
  color: #222;
  margin-bottom: 18px;
}
.simple-liveness-avatar {
  margin-bottom: 18px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.simple-liveness-tip {
  color: #222;
  font-size: 1.08em;
  font-weight: 500;
  margin-top: 8px;
}
.simple-liveness-success {
  color: #34C759;
  font-size: 1.08em;
  font-weight: bold;
  margin-top: 8px;
}
.face-popup-bg {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.12);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
}
.face-popup-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  width: 90vw;
  max-width: 340px;
  padding: 32px 18px 24px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.face-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
}
.face-back-btn {
  color: #409EFF;
  font-size: 1.1em;
}
.face-popup-icon {
  margin-bottom: 18px;
}
.face-popup-title {
  font-weight: bold;
  font-size: 1.08em;
  color: #222;
  margin-bottom: 18px;
}
.face-popup-desc {
  color: #222;
  font-size: 1.08em;
  font-weight: 500;
  margin-bottom: 18px;
}
.face-popup-agree {
  margin-bottom: 18px;
}
.face-popup-btn {
  width: 100%;
}
</style> 